<template>
  <div>
    <!-- watch语法1: -->
    <!-- <p @click="count++">count:{{count}}</p>
    <p>计算属性doubleCount: {{doubleCount}}</p>-->

    <!-- watch案例2: -->
    <!-- <p>
      <input type="text" v-model="userinfo.firstname" />
      <input type="text" v-model="userinfo.lastname" />
      <input type="text" v-model="userinfo.fullname" />
    </p>-->

    <!-- 案例3 -->
    <p id="count" @click="count++">count:{{count}}</p>
  </div>
</template>

<script>
import Vue from "vue";
const { nextTick } = Vue;
export default {
  data() {
    return {
      count: 100
      //   firstname: "",
      //   lastname: "",
      //   fullname: "",
      //   userinfo: {
      //     firstname: "李",
      //     lastname: "四",
      //     fullname: ""
      //   }
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  watch: {
    // count(newvalue, oldvalue) {
    //   console.log(newvalue, oldvalue);
    // },
    // doubleCount(newvalue, oldvalue) {
    //   console.log(newvalue, oldvalue);
    // }
    // firstname(newvalue) {
    //   console.log(newvalue);
    //   this.fullname = newvalue + this.lastname;
    // },
    // lastname(newvalue) {
    //   this.fullname = this.firstname + newvalue;
    // }
    // fullname(newvalue) {
    //   this.firstname = newvalue.substr(0, 1);
    //   this.lastname = newvalue.substr(1);
    // }
    // userinfo: {
    //   handler(newvalue) {
    //     console.log(newvalue);
    //     this.userinfo.fullname = newvalue.firstname + newvalue.lastname;
    //   },
    //   deep: true, // 设置了深度监听
    //   immediate: true
    // }

    async count(newvalue) {
      // watch 监听器的触发时间是在dom更新前执行, 所以获取的dom 还是就得dom
      //   console.log(newvalue);
      //   console.log(this);
      //   this.$nextTick(() => {
      //     console.log(document.querySelector("#count").innerHTML);
      //   });
      //   setTimeout(() => {
      //     console.log(document.querySelector("#count").innerHTML);
      //   }, 0);
      //   await this.$nextTick();
      //   console.log(document.querySelector("#count").innerHTML);
    }
  }
};
</script>
<style scoped>
</style>